<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>RAM</title>
    <link href='css/iconfont/iconfont.css' rel='stylesheet'>
    <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/ram.css">
    <link rel="stylesheet" type="text/css" href="css/textAnimate.css">

  <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css"/>
<style type="text/css">
.fakeloader{ position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 999;background-image: url(../bgAll/img/bg.png);}
</style>

</head>
<body class="wrap">

  <div class="fakeloader"></div>

  <div class="mod-star-list">
    <div class="inner">
    </div>
  </div> <!-- star-animate -->
 <!-- header Start -->
  <div id="header" class="mt12 clearfix" style="margin-left:10px">
        <div class="header-left">
            <a href="../SOLUTION/index.html" class="clearfix">
                <div class="bg-next rotate5 btn"></div>
                <p>浏览下一个产品</p>
            </a>
        </div>
        <div class="header-right" style="width: 320px;">
            <div class="header-open">分布式关系型数据库服务<span style="color:#90b8f1;">DRDS</span><p style="width:260px;">
              Distributed Relational Database Service</p></div>
        </div>
    </div>
<!-- header End -->
  <div class="zhangContainer">

      <div class="imgDiv ">
          <div class="userAll" style="display: none">
              <ul>
                  <li style="left:395px " class="dropAni"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left:395px " class="dropAniDelay"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left:263px " class="dropAni"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left:263px " class="dropAniDelay"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left:210px " class="dropAni2"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left:210px " class="dropAniDelay2"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left:315px " class="dropAni3"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left:315px " class="dropAniDelay3"><img style="width: 30px" src="img/drop.png"></li>
              </ul>
          </div>
          <div class="userAll_1">
              <ul>
                  <li style="left: 259px" class="dropAni4"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 259px" class="dropAniDelay4"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 259px" class="dropAni4E"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 259px" class="dropAni4E1"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 289px" class="dropAni5"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left: 289px" class="dropAniDelay5"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left: 289px" class="dropAni5E"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left: 289px" class="dropAni5E1"><img style="width: 30px" src="img/drop.png"></li>
                  <li style="left: 319px" class="dropAni4"><img style="width: 10px" src="img/drop.png"></li>
                  <li style="left: 319px" class="dropAniDelay4"><img style="width: 10px" src="img/drop.png"></li>
                  <li style="left: 319px" class="dropAni4E"><img style="width: 10px" src="img/drop.png"></li>
                  <li style="left: 319px" class="dropAni4E1"><img style="width: 10px" src="img/drop.png"></li>
                  <li style="left: 349px" class="dropAni5"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 349px" class="dropAniDelay5"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 349px" class="dropAni5E"><img style="width: 20px" src="img/drop.png"></li>
                  <li style="left: 349px" class="dropAni5E1"><img style="width: 20px" src="img/drop.png"></li>
              </ul>
          </div>
        <div class="inner-pro">

          <div class="img_back">

            <!-- </div> -->
            <div class="J_core">
              <div class="rc">
                 <img src="./img/dbOne.png" style="width: 150px" class="smallCircle">
              </div>
              <div class="addRc">
                  <img src="img/dbOne.png"  style="width: 70px">
              </div>
                <div class="mysql">
                    <div class="shineAction" style="margin-right: 300px">
                        MYSQL
                    </div>
                    <div class="shineAction">
                        MYSQLclient
                    </div>
                </div>
            </div>
            <div class="dbCanvas" style="display: none">
              <canvas id="db0" style="position:absolute;top:484px;left: 9%;"></canvas>
              <canvas id="db1" style="position:absolute;top:486px;left: 24%;"></canvas>
              <canvas id="db2" style="position:absolute;top:486px;left: 26%;"></canvas>
              <canvas id="db3" style="position:absolute;top:486px;left: 38%;"></canvas>
              <canvas id="db4" style="position:absolute;top:486px;left: 40%;"></canvas>
              <canvas id="db5" style="position:absolute;top:394px;left: 7%;"></canvas>
              <div class="innnn">
                  <ul>
                      <li class="shineAction"><img src="img/deal.png"></li>
                      <li class="shineAction"><img style="width: 65px;margin-top: 2px" src="img/commodity.png"></li>
                      <li class="shineAction"><img src="img/evaluate.png"></li>
                  </ul>
              </div>
            </div>
            <div class="dbCanvas1">
              <canvas id="db6" style="position:absolute;top:484px;left: 13%;"></canvas>
              <canvas id="db7" style="position:absolute;top:484px;left: 20%;"></canvas>
              <canvas id="db8" style="position:absolute;top:484px;left: 28%;"></canvas>
              <canvas id="db9" style="position:absolute;top:484px;left: 35%;"></canvas>
            </div>
            <div class="wave"></div>
          </div>

        </div><!-- inner-pro -->

      </div><!-- imgDiv-center -->


      <div id="myBtn">
          <ul>
              <li>
                  <div class="onoffswitch fr">
                      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox btn1" id="myonoffswitch" checked>
                      <label class="onoffswitch-label" for="myonoffswitch">
                          <div class="onoffswitch-inner">
                              <div class="onoffswitch-active">OFF</div>
                              <div class="onoffswitch-inactive">ON</div>
                          </div>
                          <div class="onoffswitch-switch"></div>
                      </label>
                  </div>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;DRDS开关</p>
              </li>

          </ul>
          <div class="myHead hand"><img src="img/hand.png"></div>
      </div>
      <div class="server_1">
          <div class="round">
              <div class="servicebg rotate30">
              </div>
              <div class="service-allicons">
                  <div class="serviceicon service-baseA"></div>
                  <div class="serviceicon service-baseB"></div>
                  <div class="serviceicon service-baseC"></div>
                  <div class="serviceicon service-baseD"></div>
                  <div class="serviceicon service-baseE"></div>
                  <div class="serviceicon service-baseF"></div>
                  <div class="serviceicon service-baseG"></div>
                  <div class="serviceicon service-baseH"></div>
              </div>
              <div class="servicecenter">
                  <img class="rotate5" src="img/serverround.png">
              </div>
          </div>
      </div>


      <!--右侧菜单-->
      <nav>
        <aside class="myAside">
          <img src="img/index/navbar-bg.png" class="nav_line" />
          <ul class="nav_pro">
            <li class="nav_sub1" id="introduction">
              <span ><img src="../SOLUTION/img/ONLINE/r0.png"></span>

              <img src="img/index/cir-introduction.png" class="rotate5" />
              <span>拓展</span>
            </li>
            <li class="nav_sub2 cipan1" id="function">
              <span ><img src="../SOLUTION/img/ONLINE/safe.png"></span>
              <img src="img/index/cir-function.png" class="rotate5" />
              <span>稳定</span>
            </li>
            <li class="nav_sub3" id="advantage">
              <span ><img src="../SOLUTION/img/ONLINE/xx.png"></span>
              <img src="img/index/cir-function.png" class="rotate5" />
              <span>简单</span>
            </li>
            <li class="nav_sub4" id="changjing">
              <span ><img src="../SOLUTION/img/ONLINE/hh.png"></span>
              <img src="img/index/cir-function.png" class="rotate5" />
              <span>服务</span>
            </li>
          </ul>

        </aside>
      </nav><!-- nav -->
  </div>
  <div class="service"></div>
  <footer class="clearfix">
    <div class="footer-left fl">
        <a href="../index.html?goods=goods2" class="back shineAction"></a>
        <div class="backText">返回上一级</div>
    </div>
    <div class="footer-right fr">
        <a href="" class="refresh shineAction"></a>
        <div class="refreshText">刷新&nbsp;</div>
    </div>
</footer>

</body>

<script type="text/javascript"  src='../bgAll/js/jquery-1.11.1.min.js'></script>

<script src="../bgAll/js/fakeLoader.min.js"></script>
<script src="../bgAll/js/common.js"></script>

<script type="text/javascript"  src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript"  src='../bgAll/js/star.js'></script>

<script type="text/javascript"  src='./js/ram.js'></script>

</html>